<template>
  <div style="background-color: rgba(255, 255, 255, 1);height:100%">
    <div class="contain">
      <div class="nav">
        <h3 :class="{active: selectType===1}" @click="selectType=1">枕头数据</h3>
        <h3 style="padding-left:20px" :class="{active: selectType===2}" @click="selectType=2">睡眠结果</h3>
      </div>
      <div class="pillow" v-if="selectType===1">
        <Pillow :pillow="bloc.paged.items" @dateChange="dateChange"/>
      </div>
      <div class="sleep" v-if="selectType===2">
        <Sleep :rouseCount="bloc.rouseCount" @sleepChange="sleepChange" :asleepAnalyze="bloc.AsleepAnalyze.items"
               :sleepWarning="bloc.SleepWarning.items" :song="bloc.playRank" @reportChange="reportChange"/>
      </div>
    </div>
    <Modal
      title="确认提示"
      v-model="batchDelete"
      class-name="vertical-center-modal"
      @on-ok="batchDeleteAction(false)"
    >
      <div>
        <span>
          <h2>
            <Icon type="ios-help-circle-outline" size="48" color="rgba(255, 209, 145, 1)"/>是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left:45px;">是否确定删除对应的记录</p>
      </div>
    </Modal>

  </div>
</template>
<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {ChartBar} from '@/component/charts';
  import Pillow from '@/view/member/component/Pillow.vue';
  import Sleep from '@/view/member/component/Sleep.vue';
  import {Route} from 'vue-router';
  import {DetailBloc} from '@/view/member/bloc/MemberDetailBloc';
  import {getToday} from '@/base/util/tools'

  @Component({
    components: {ChartBar, Pillow, Sleep}
  })
  export default class extends Vue {
    selectType = 1
    batchDelete = false
    bloc: DetailBloc = new DetailBloc()

    beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
      next(vm => {
      });
    }

    created() {
      this.bloc.form.createEnd = getToday()
      this.bloc.form.createBegin = (Number(this.bloc.form.createEnd.slice(0, 4)) - 1) + this.bloc.form.createEnd.slice(4)
      Promise.all([this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize), this.bloc.getRouseCount(),
        this.bloc.getAsleepAnalyze(this.bloc.paged.pageIndex, this.bloc.paged.pageSize), this.bloc.getSleepWarning(this.bloc.paged.pageIndex, this.bloc.paged.pageSize), this.bloc.getPlayRank()])
        .catch(e => {
          this.$Message.error('操作错误');
        })
    }

    dateChange(date1, date2) {
      this.bloc.form.createBegin = date1
      this.bloc.form.createEnd = date2
      this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize)
        .catch(e => {
          this.$Message.error('操作错误');
        });
    }

    sleepChange(date1, date2) {
      this.bloc.form.createBegin = date1
      this.bloc.form.createEnd = date2
      this.bloc.getRouseCount()
        .catch(e => {
          this.$Message.error('操作错误');
        });
    }

    reportChange(date) {
      this.bloc.time.createBegin = date
      Promise.all([this.bloc.getAsleepAnalyze(this.bloc.paged.pageIndex, this.bloc.paged.pageSize),
        this.bloc.getSleepWarning(this.bloc.paged.pageIndex, this.bloc.paged.pageSize), this.bloc.getPlayRank()])
        .catch(e => {
          this.$Message.error('操作错误');
        })
    }

    batchDeleteAction(nodesc) {
      if (nodesc === true) {
        this.$Message.success('设备删除成功');
      } else {
        this.$Message.error('设备删除失败');
      }
    }
  }
</script>
<style lang="less" scoped>
  header {
    height: 140px;
    width: 100%;
    font-size: 18px;
    padding: 25px 20px;
    border: 1px solid rgba(242, 242, 242, 1);

    .user-device-box > div {
      width: 120px;
    }

    .home-user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 15px;
      color: #999;
      font-size: 14px;

      span {
        padding: 5px 0;
        display: flex;

      }
    }
  }

  .contain {
    margin: 20px 0;
    border: 1px solid rgba(242, 242, 242, 1);

    .nav {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      display: flex;
      justify-content: flex-start;

      h3 {
        padding: 0 20px;
        cursor: pointer;
      }
    }

    .bottom {
      padding: 0px 30px 30px 30px;
    }

    .top {
      width: 100%;
      height: 500px;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .active {
    border-bottom: 1px solid #559DF9;
    color: #559DF9;
  }
</style>
